<template>
  <div class="chart-container">
    <h3 class="chart-title">分析质量监控 (被一审驳回次数)</h3>
    <div id="staffUsageChart" style="width: 100%; height: 200px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  // 接收父组件数据
  props: {
    staffData: {
      type: Array,
      default: () => []
    }
  },
  
  name: 'StaffUsageChart',
  
  data() {
    return {
      chart: null,
      // 直接使用提供的数据结构
      // staffData: [
      //   {
      //     "fxr": "hejh",
      //     "bysbhyc": "1",
      //     "fxr_xm": "何俊辉",
      //     "id": "13",
      //     "ssbm": "油气地球化学组"
      //   },
      //   {
      //     "fxr": "heyj",
      //     "bysbhyc": "7",
      //     "fxr_xm": "贺银军",
      //     "id": "14",
      //     "ssbm": "岩矿储层评价组"
      //   }
      // ]
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
    if (this.chart) {
      this.chart.dispose();
    }
  },
  watch: {
    staffData: {
      handler(newVal) {
        if (this.chart) {
          this.chart.dispose();
        }
        this.initChart();
      },
      deep: true
    }
  },
  methods: {
    initChart() {
      // 获取DOM元素
      const chartDom = document.getElementById('staffUsageChart');
      this.chart = echarts.init(chartDom);
      
      // 处理数据
      const categories = this.staffData.map(item => item.fxr_xm);
      const values = this.staffData.map(item => parseInt(item.bysbhyc));
      const departments = this.staffData.map(item => item.ssbm);
      
      // 配置图表选项
      const options = {
        title: {
          text: '本月设备耗材使用次数',
          left: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            const index = params.dataIndex;
            return `
              <div style="font-weight: bold;">${params.name}</div>
              <div>部门：${departments[index]}</div>
              <div>使用次数：${params.value} 次</div>
            `;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: categories,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#666'
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          }
        },
        series: [
          {
            name: '使用次数',
            type: 'bar',
            data: values,
            barWidth: '40%',
            itemStyle: {
              color: '#409EFF',
              borderRadius: [4, 4, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              color: '#333'
            }
          }
        ]
      };
      
      // 设置图表选项
      this.chart.setOption(options);
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.chart-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}
</style>
